<template>
  <div class="tab-box">
    <div
      v-for="(item, index) in componentData.list"
      :key="index"
      class="navbar-in"
      @click="handleTabChange(item, index)"
    >
      <div
        class="icon-box"
        :style="{
          backgroundColor:
            currentNavbar === index ? componentData.activeColor : componentData.defaultColor,
        }"
      >
        <img
          :src="item.icon.url"
          alt="solution"
          :style="{
            filter: `drop-shadow(${
              currentNavbar === index ? '#ffffff' : componentData.activeColor
            } 13.33vw 0)`,
          }"
        />
      </div>
      <span class="ft-22">{{ item[`title${capitalizeLang}`] }}</span>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      currentNavbar: 0,
    }
  },
  computed: {
    ...mapGetters(['capitalizeLang']),
  },
  watch: {
    '$route.query': {
      immediate: true,
      handler(val) {
        if (val.id) {
          const currentNavbar = this.componentData.list.findIndex((item) => +item.url === +val.id)
          this.currentNavbar = currentNavbar
        }
      },
    },
  },
  methods: {
    handleTabChange(item, index) {
      if (!item.url) {
        return
      }
      this.currentNavbar = index
      console.log('this.currentNavbar', this.currentNavbar)
      this.$router.push({
        path: '/solution',
        query: {
          id: item.url,
          type: item.classificationType,
        },
      })
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.tab-box {
  width: 100%;
  height: 348px;
  background-color: #f6f7f9;
  overflow-y: auto;
  padding: 60px 0 0 24px;
  display: flex;
  flex-wrap: nowrap;
  color: rgba(0, 0, 0, 0.65);

  .navbar-in {
    flex: 0 0 200px;
    height: 228px;
    background: #fff;
    box-shadow: 1px 3px 16px 0 rgba(7, 98, 203, 0.16);
    align-items: center;
    text-align: center;
    margin-right: 24px;
    padding: 0 30px;
    line-height: 30px;
    cursor: pointer;
    transform: translateZ(0);

    .icon-box {
      display: block;
      margin: 36px auto 24px auto;
      width: 78px;
      height: 78px;
      border-radius: 50%;
      background-color: #eef6fe;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 40px;
        height: 40px;
        filter: drop-shadow(#0261bc 100px 0);
        -webkit-filter: drop-shadow(#0261bc 100px 0);
        transform: translateX(-100px);
        display: block;
        margin: 0 auto;
      }
    }

    span {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  .ft-22 {
    font-size: 22px;
    font-weight: bold;
  }
}
</style>
